<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <ToHeader :list="list"> </ToHeader>
    <!-- 主体部分 -->
    <ToBody
      :list="list"
      @clearList="clearList"
      :checkAll="checkAll"
      @isshowAll="isshowAll"
     
    >
    </ToBody>
    <!-- 底部部分 -->
    <ToFooter :list="list" @clearData="clearData" :numberS="numberS">
    </ToFooter>
  </section>
</template>

<script>
// 引入子组件
import ToHeader from '@/components/ToHeader.vue'
import ToBody from '@/components/ToBody.vue'
import ToFooter from '@/components/ToFooter.vue'
export default {
  // 注册子组件
  components: {
    ToHeader,
    ToBody,
    ToFooter
  },
  data () {
    return {
      list: [
        {
          id: 1,
          text: '读万卷书',
          completed: true
        },
        {
          id: 2,
          text: '行万里路',
          completed: true
        },
        {
          id: 3,
          text: '千里之行',
          completed: false
        }
      ]
    }
  },
  methods: {
    // 删除功能
    clearList (id) {
      this.list = this.list.filter(item => item.id !== id)
    },

    // 清除功能
    clearData () {
      this.list = this.list.filter(item => item.completed === false)
    },
    isshowAll (checkAll) {
      this.list.filter(item => (item.completed = !checkAll))
    },
   
  },
  computed: {
    // 剩余几条
    numberS () {
      return this.list.length
    },
    checkAll () {
      return this.list.every(item => item.completed === true)
    }
  }
}
</script>

<style></style>
